import React, { useState } from 'react';
import { Form, Input, Button, List, Avatar, message } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const { TextArea } = Input;

interface Message {
  id: number;
  author: string;
  content: string;
}

const MessageBoard: React.FC = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [form] = Form.useForm();

  const handleSubmit = (values: { author: string; content: string }) => {
    const newMessage: Message = {
      id: messages.length + 1,
      author: values.author,
      content: values.content,
    };
    setMessages([...messages, newMessage]);
    form.resetFields();
    message.success('留言已添加');
  };

  const handleDelete = (id: number) => {
    setMessages(messages.filter(message => message.id !== id));
    message.success('留言已删除');
  };

  return (
    <div style={{ padding: '20px' }}>
      <Form form={form} onFinish={handleSubmit} layout="vertical">
        <Form.Item
          name="author"
          label="昵称"
          rules={[{ required: true, message: '请输入昵称' }]}
        >
          <Input placeholder="请输入昵称" />
        </Form.Item>
        <Form.Item
          name="content"
          label="留言内容"
          rules={[{ required: true, message: '请输入留言内容' }]}
        >
          <TextArea rows={4} placeholder="请输入留言内容" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
      <List
        itemLayout="horizontal"
        dataSource={messages}
        renderItem={item => (
          <List.Item
            actions={[
              <Button type="link" danger onClick={() => handleDelete(item.id)}>
                删除
              </Button>,
            ]}
          >
            <List.Item.Meta
              avatar={<Avatar icon={<UserOutlined />} />}
              title={item.author}
              description={item.content}
            />
          </List.Item>
        )}
      />
    </div>
  );
};

export default MessageBoard;